<style>
    .time {
        font-size: 15px;
        font-weight: bold;
    }

    .content {
        padding-left: 10px;
        padding-top:4px;
        padding-bottom: 4px;
        font-size: 13px;
    }
</style>
<template>
    <span>
    <Button @click="showDrawer" type="success" size="small">教育经历</Button>
    <Drawer title="教育经历" :closable="false" placement="right" width="500" v-model="drawerVisible">
    <Timeline>
       <TimelineItem v-for="item in eduList">
            <p class="time">教育经历</p>
            <p class="content">学校名称：{{item.schoolName}}</p>
            <p class="content">就读时间：{{item.studyStartTime}}至{{item.studyEndTime}}</p>
            <p class="content">学历：{{item.education}}</p>
            <p class="content">专业：{{item.major}}</p>
            <p class="content" v-if="item.unified==1">是否统招：是</p>
            <p class="content" v-if="item.unified==2">是否统招：否</p>
            <p class="content">证书编号：{{item.certificateNo}}</p>
            <p class="content">毕业证：</p>
            <div class="demo-avatar" v-if="item.diploma" @click="showPic(item.diploma)">
                <img style="cursor:pointer;width: 160px;height: 120px;margin: 10px 0;object-fit: contain;" :src="item.diploma"  />
            </div>
            <p class="content">职称：{{item.academicTitle}}</p>
            <p class="content">级别：{{item.grade}}</p>
            <p class="content">职称证书：</p>
            <div class="demo-avatar" v-if="item.academicImg" @click="showPic(item.academicImg)">
                <img style="cursor:pointer;width: 160px;height: 120px;margin: 10px 0;object-fit: contain;" :src="item.academicImg"  />
            </div>
            <!--<p class="content" v-if="item.isEducation==1" style="color: #52c41a">已认证</p>
            <p class="content" v-if="item.isEducation==3" style="color: red">未通过</p>
            <p class="content" v-if="item.isEducation==2" style="color: blue">未认证</p>-->
        </TimelineItem>
    </Timeline>
    <Modal v-model="picVisible" title="图片" draggable>
        <img :src="fileUrl" alt="无效的图片链接" style="width: 80%;margin: 0 auto;display: block;">
    </Modal>
    </Drawer>
    </span>
</template>
<script>
    import {educationList} from "@/api/index";

    export default {
        name: "eduDrawer",
        props: {
            id: ""
        },
        data() {
            return {
                drawerVisible:false,
                fileUrl: "",
                picVisible: false,
                eduList: []
            }
        },
        methods: {

            //加载数据
            showDrawer() {
                this.type = 1;
                this.drawerTitle = "工作经历";
                this.drawerVisible = true;
                this.getData();

            },
            showPic(v) {
                this.fileUrl = v;
                this.picVisible = true;
            },
            getaaa(a){
                alert(a.code);
            },
            getData() {
                this.loading = true;
                educationList(this.id).then(res => {
                    this.loading = false;
                    if (res.status === true) {
                        this.eduList = res.data;
                    }
                });
            }

        }
    }
</script>